<template>
    <el-card shadow="never">
      <!-- 搜索 -->
      <el-form :model="searchForm" class="mb-3" size="small">
        <el-row>
          <el-col :span="6">
            <el-form-item label="搜索">
              <el-select v-model="searchForm.keyword" placeholder="請選擇">
                <el-option
                  v-for="item in tabbars"
                  :key="item.id"
                  :label="item.name"
                  :value="item.type"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="時間選擇">
              <el-date-picker
                v-model="searchForm.time"
                type="daterange"
                range-separator="至"
                start-placeholder="開始時間"
                end-placeholder="結束時間"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="6">
            <el-button type="primary" @click="getData">搜索</el-button>
            <el-button @click="resetSearchForm">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
  
      <!-- 新增刷新 -->
      <ListHeader
        layout="refresh,download"
        @refresh="getData"
        @download="handleExportExcel"
      ></ListHeader>
  
      <!-- 表格 -->
  
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column label="序號">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
        <el-table-column prop="username" label="管理員" >
          <template #default="{row}">
             {{ row.admin.username }}
          </template>
        </el-table-column>
        <el-table-column prop="content" label="修改參數" />
        <el-table-column prop="type" label="類型" >
          <template #default="{row}">
             {{ row.type==1?'庫存':row.type==2?'積分':row.type==3?'優惠券':'系统' }}
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="創建時間" />
       
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        class="flex justify-center mt-4"
        @current-change="getData"
        :current-page="curpage"
        :page-size="limit"
      />
    </el-card>
  </template>
  
  <script setup>
  import { getlog,excel} from "@/api/log.js";
  import ListHeader from "@/components/ListHeader.vue";
  import { useInitTable } from "@/composables/useCommon.js";
  
  const {
    searchForm,
    resetSearchForm,
    tableData,
    loading,
    curpage,
    total,
    limit,
    getData,
    handleDelete,
  } = useInitTable({
    searchForm: {
      keyword: "",
      time: [],
    },
    getList: getlog,
  });

  
  const tabbars = [
    {
      type: 2,
      name: "積分",
    },
    {
      type: 1,
      name: "庫存",
    },
    {
      type: 3,
      name: "優惠券",
    },
    {
      type: 4,
      name: "系统",
    },
  ];

  function handleExportExcel() {
    excel().then((res) => {
    window.open(res, "_blank");
  });
}
  </script>
  